<template>
  <div class="mainContainer">
    <!-- {{id}} -->
    <div style="position: absolute;right: 10px;top: 5px;z-index:1" class="t-r">
<!--      <el-button @click="openVoice">开启声音</el-button>-->
<!--      <el-button @click="cloneVoice">关闭声音</el-button>-->
      <!-- <el-button style="background:rgba(255,255,255,.2);color:#fff" @click="fullScreen">画面全屏</el-button> -->
      <!-- <el-button @click="screenshot()">截图</el-button> -->
      <el-button @click="fullScreen()">画面全屏</el-button>
    </div>
    <video controls   style="border-radius: 10px;" :id="id" :name="id" :muted="ying" :width="width" :height="height" poster="@/assets/img/room2.jpg"></video>
  </div>

</template>

<script setup>
/**
 * 视频播放  
 * 参考https://blog.csdn.net/aibujin/article/details/131455058
 */
import { onMounted, ref, onUnmounted } from 'vue'
import flvjs from 'flv.js'
const emit = defineEmits(['']);
const props = defineProps({
  width: {
    type: String,
    default: '1024',
  },
  height: {
    type: String,
    default: '576',
  },
  id: {
    type: String,
    default: 'video-contianer',
  },
  url: {
    type: String,
    default: ''
    // default: 'https://c-v.wtu.edu.cn/nmserv/10.176.242.1:19614/live/42010000111320000004/10973031/live.flv?account_token=dGltZT0yMDIzLTA2LTI1VDAzOjE0OjAzJmRldmljZWlkPTQyMDEwMDAwMTExMzIwMDAwMDA0JnVzZXJpZD1hZG1pbiZyb2xlaWQ9YWRtaW4maGFzaD05NTM4YjFlOTFlNzAxMGUy',
    // default: 'https://c-v.wtu.edu.cn/nmserv/10.176.242.1:19612/live/42010000111320000194/10973032/live.flv?account_token=dGltZT0yMDIzLTA2LTI1VDAzOjE0OjAzJmRldmljZWlkPTQyMDEwMDAwMTExMzIwMDAwMTk0JnVzZXJpZD1hZG1pbiZyb2xlaWQ9YWRtaW4maGFzaD1hMzNlMDI1NzA1OGNiYzhl',
  }
})
// console.log('props==', props)

/**
 * 重新加载视频
 */
const load = (url) => {
  if (flvPlayer.value != null) {
    destory()
  }
  initFlv(url)
}
// ======================================================
//                      变量声明
// ======================================================

const flvPlayer = ref(null)

const ying = ref(true)


onMounted(() => {
  // console.log('isSupported: ' + flvjs.isSupported())
  // console.log('是否支持点播视频：' + flvjs.getFeatureList().mseFlvPlayback)
  // console.log(
  //   '是否支持httpflv直播流：' + flvjs.getFeatureList().mseLiveFlvPlayback
  // )
  // initFlv()
})


/**
 * 创建 flvjs 实例
 */
const initFlv = (url) => {
  // console.log('url==', url)
  if (flvjs.isSupported()) {
    const ele = document.getElementById(props.id)
    ele.volume =  0.5
    openVoice()
    flvPlayer.value = flvjs.createPlayer({
      type: 'flv', // 指定视频类型
      isLive: true, // 开启直播
      hasAudio: true, // 关闭声音
      cors: true, // 开启跨域访问
      url: url, // 指定流链接
    })
    // 将flvjs对象和DOM对象绑定

    flvPlayer.value.attachMediaElement(ele)
    flvPlayer.value.load()
    flvPlayer.value.play()
  }
}

// // 我的视频是弹窗显示的，所以创建了destroy方法，在子组件中暴露出去后，在父组件调用即可，这样关闭弹窗后，视频流会停止请求。
/**
 * 销毁
 */
const destory = () => {

  if (flvPlayer.value != null) {
    flvPlayer.value.pause(); //暂停播放数据流
    flvPlayer.value.unload(); //取消数据流加载
    flvPlayer.value.detachMediaElement(); //将播放实例从节点中取出
    flvPlayer.value.destroy(); //销毁播放实例
    flvPlayer.value = null;
  }


}
/**
 * 截图
 */
const screenshot = (id) => {
  const ele = document.getElementById(id)
  const canvas = document.createElement('canvas')
  canvas.width = ele.clientWidth
  canvas.height = ele.clientHeight
  const ctx = canvas.getContext('2d')
  ctx.drawImage(ele, 0, 0, ele.clientWidth, ele.clientHeight)
  viewPicture(canvas.toDataURL('image/jpeg'))
}
/**
 * 截图预览
 */
const viewPicture = (url) => {
  const id = 'viewPicture' + new Date().getTime()
  var container = document.createElement('div')
  container.id = id
  container.style.cssText =
    'position: fixed;right:0;bottom:0;height:200px;width:300px;transition: 3s;'
  var img = document.createElement('img')
  img.style.cssText = 'width:100%;height:100%;object-fit: inherit;'
  img.src = url
  container.appendChild(img)
  document.body.appendChild(container)

  setTimeout(() => {
    container.style.width = '0'
    container.style.height = '0'
  }, 3000)
  setTimeout(() => {
    document.body.removeChild(document.getElementById(id))
  }, 5000)
}





/**
 * 缩放
 */
const zoom = () => {
  if (!!isFullscreen()) exitFullScreen()
  else requestFullScreen()
}

const isFullscreen = () => {
  const documentScreenElement = document
  return (
    documentScreenElement.fullscreenElement ||
    documentScreenElement.msFullscreenElement ||
    documentScreenElement.mozFullScreenElement ||
    documentScreenElement.webkitFullscreenElement ||
    false
  )
}
const requestFullScreen = () => {
  let documentRequestScreenElement = null
  documentRequestScreenElement = document.getElementById(props.id)

  var requestMethod =
    documentRequestScreenElement.requestFullScreen ||
    documentRequestScreenElement.webkitRequestFullScreen ||
    documentRequestScreenElement.mozRequestFullScreen ||
    documentRequestScreenElement.msRequestFullScreen
  if (requestMethod) {
    requestMethod.call(documentRequestScreenElement)
  }


}

const exitFullScreen = () => {
  const documentFullScreenElement = document
  var exitMethod =
    documentFullScreenElement.exitFullscreen ||
    documentFullScreenElement.mozCancelFullScreen ||
    documentFullScreenElement.webkitExitFullscreen ||
    documentFullScreenElement.msExitFullscreen
  if (exitMethod) {
    exitMethod.call(documentFullScreenElement)
  }
}
//开启声音
const openVoice = () => {
  console.log('开启声音===')
  ying.value = false
}
//关闭声音
const cloneVoice = () => {
  console.log('关闭声音=====')
  ying.value = true
}

//画面全屏
const fullScreen = () => {
  const elVideo = document.getElementById(props.id)
  console.log('elVideo==', elVideo)
  elVideo.requestFullscreen();
}
onUnmounted(() => {
  destory()
})
// ======================================================
//                      处理事件
// ======================================================


const createVideo = (id, url) => {
  if (flvjs.isSupported()) {
    var videoElement = document.getElementById(id);
    flvPlayer.value = flvjs.createPlayer(
      {
        type: 'flv',
        url: url, //你的url地址
        isLive: true,
        hasAudio: true,
      }
    );
    flvPlayer.value.attachMediaElement(videoElement);
    flvPlayer.value.load();

    setTimeout(function () {
      flvPlayer.value.play();
    }, 300);
    //处理视频播放错误的语法
    flvPlayer.value.on('error', () => {
      message.error(`视频加载失败，请稍候重试！`);
      return false;
    });
  }
};




defineExpose({
  initFlv,
  load,
  destory
})

</script>
<style lang="less" scoped>
.mainContainer {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
</style>